<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<title>Insert title here</title>
</head>
<body>
	<div>
		<i class="layui-icon" style="font-size: 25px; color: #1E9FFF;">&#xe614;</i>
		<h2 style="display: inline;">
			系统管理<i class="layui-icon" style="font-size: 20px; color: #1E9FFF;">&#xe65b;</i>
			桌面管理
		</h2>
	</div>
	<p>&nbsp;</p>
	<form class="layui-form" id="desk">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		<div class="layui-form-item" id="div"></div>

		<div class="layui-form-item">
			<label class="layui-form-label">我的桌面</label>
			<div class="layui-input-block">

				<template v-for="desk in desklist"> <template
					v-if="desk.state==1"> <input type="checkbox" checked
					name="" :title="desk.name" :value="desk.id"> </template> <template
					v-else> <input type="checkbox" name=""
					:title="desk.name" :value="desk.id"> </template> </template>
			</div>
		</div>


		<div id="but" class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" @click="save()" id="save" class="layui-btn">保存</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->


	</form>

	<script type="text/javascript">
		layui.use('form', function() {
			var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功

			form.render();
		});
		var vue = new Vue({
			el : "#desk",
			data : {
				desklist : '',
			},
			methods : {
				save : function() {
					var arr = [];

					$("input[type='checkbox']").each(function(i) {
						var id = $(this).val();//得到id
						//console.log($(this).attr("checked"));
						if ($(this).is(':checked')) {
							// do something
							console.log($(this).val());
							arr[i] = {
								"id" : id,
								"state" : 1
							};
						} else {
							arr[i] = {
								"id" : id,
								"state" : 0
							};
						}

					});

					console.log(arr);
					$.ajax({
						url : '../desk/updateDesk',
						type : 'post',
						contentType : "application/json",
						data : JSON.stringify(arr),
						dataType : "text",
						success : function(result) {
							if (result == "success") {
								alert("保存成功");
							} else {
								alert("保存失败");
							}
						}

					});//ajax 
				}
			}

		});//vue

		$(function() {

			$.ajax({
				url : '../desk/queryDesk',
				type : 'post',
				data : {},
				dataType : "json",
				async : false,
				success : function(result) {
					console.log(result);
					vue.desklist = result;
					$.each(result, function(index, ele) {
						console.log(ele);
						$("input[type='checkbox']").each(function(i) {
							if (ele.state == 1 && ele.id == $(this).val()) {
								$(this).attr("checked", true);
							}

						});
					});

				}

			});//ajax

		});// function
	</script>
</body>
</html>